import 'package:flutter/material.dart';
import 'package:inventory_system/screens/login/login_screen.dart';
import 'package:inventory_system/screens/user_settings_screen.dart';

class Sidebar extends StatelessWidget {
  final bool isMenuExpanded;
  final double expandedWidth;
  final double collapsedWidth;
  final String activeMenuItem;
  final bool showNewProductBadge;
  final bool showNewSaleBadge;
  final bool showNewReportBadge;
  final Function(String) onMenuItemTap;
  final VoidCallback onToggleMenu;

  const Sidebar({
    Key? key,
    required this.isMenuExpanded,
    this.expandedWidth = 256,
    this.collapsedWidth = 90,
    required this.activeMenuItem,
    required this.showNewProductBadge,
    required this.showNewSaleBadge,
    required this.showNewReportBadge,
    required this.onMenuItemTap,
    required this.onToggleMenu,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOutQuart,
      width: isMenuExpanded ? expandedWidth : collapsedWidth,
      decoration: BoxDecoration(
        color: const Color(0xFF223152), // سەل ئۇچۇقراق كۆك رەڭ
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          // باش تېما
          Container(
            height: 70,
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            decoration: const BoxDecoration(
              color: Color(0xFF2C3E67), // سەل ئۇچۇقراق رەڭ
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: onToggleMenu,
                borderRadius: BorderRadius.circular(8),
                child: Center(
                  child: isMenuExpanded
                    ? Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          const Expanded(
                            child: Text(
                              'تىجارەت ياردەمچىسى',
                              textDirection: TextDirection.rtl,
                              textAlign: TextAlign.right,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      )
                    : const Center(
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.white,
                          size: 28,
                        ),
                      ),
                ),
              ),
            ),
          ),
          const Divider(color: Colors.white24, height: 1),
          // تىزىملىك تۈرلىرى
          Expanded(
            child: ListView(
              padding: const EdgeInsets.symmetric(vertical: 16),
              children: [
                _buildMenuItem(
                  icon: Icons.dashboard,
                  title: 'باش بەت',
                  onTap: () => onMenuItemTap('باش بەت'),
                  isSelected: activeMenuItem == 'باش بەت',
                ),
                _buildMenuItem(
                  icon: Icons.add_shopping_cart,
                  title: 'مال كىرگۈزۈش',
                  onTap: () => onMenuItemTap('مال كىرگۈزۈش'),
                  isSelected: activeMenuItem == 'مال كىرگۈزۈش',
                  showBadge: showNewProductBadge,
                ),
                _buildMenuItem(
                  icon: Icons.shopping_cart_checkout,
                  title: 'مال سېتىش',
                  onTap: () => onMenuItemTap('مال سېتىش'),
                  isSelected: activeMenuItem == 'مال سېتىش',
                  showBadge: showNewSaleBadge,
                ),
                _buildMenuItem(
                  icon: Icons.inventory_2,
                  title: 'ئامبار باشقۇرۇش',
                  onTap: () => onMenuItemTap('ئامبار باشقۇرۇش'),
                  isSelected: activeMenuItem == 'ئامبار باشقۇرۇش',
                ),
                _buildMenuItem(
                  icon: Icons.account_balance_wallet,
                  title: 'مالىيە باشقۇرۇش',
                  onTap: () => onMenuItemTap('مالىيە باشقۇرۇش'),
                  isSelected: activeMenuItem == 'مالىيە باشقۇرۇش',
                ),
                _buildMenuItem(
                  icon: Icons.bar_chart,
                  title: 'دوكلات ۋە ستاتىستىكا',
                  onTap: () => onMenuItemTap('دوكلات ۋە ستاتىستىكا'),
                  isSelected: activeMenuItem == 'دوكلات ۋە ستاتىستىكا',
                  showBadge: showNewReportBadge,
                ),
                const Divider(color: Colors.white24, height: 32),
                _buildMenuItem(
                  icon: Icons.settings,
                  title: 'تەڭشەكلەر',
                  onTap: () => onMenuItemTap('تەڭشەكلەر'),
                  isSelected: activeMenuItem == 'تەڭشەكلەر',
                ),
                _buildMenuItem(
                  icon: Icons.help_outline,
                  title: 'ياردەم',
                  onTap: () => onMenuItemTap('ياردەم'),
                  isSelected: activeMenuItem == 'ياردەم',
                ),
                _buildMenuItem(
                  icon: Icons.info_outline,
                  title: 'دىتال ھەققىدە',
                  onTap: () => onMenuItemTap('دىتال ھەققىدە'),
                  isSelected: activeMenuItem == 'دىتال ھەققىدە',
                ),
              ],
            ),
          ),
          // ئىشلەتكۈچى ئۇچۇرى
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOutQuart,
            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
            decoration: const BoxDecoration(
              color: Color(0xFF2C3E67), // سەل ئۇچۇقراق رەڭ
              border: Border(
                top: BorderSide(color: Colors.white24, width: 1),
              ),
            ),
            child: isMenuExpanded ? 
              // كەڭەيگەن ھالەتتىكى قۇرۇلما
              AnimatedOpacity(
                opacity: isMenuExpanded ? 1.0 : 0.0,
                duration: const Duration(milliseconds: 200),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // سول تەرەپتىكى ئايكون
                    Material(
                      color: Colors.transparent,
                      child: InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const UserSettingsScreen(),
                            ),
                          );
                        },
                        borderRadius: BorderRadius.circular(20),
                        child: Container(
                          padding: const EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.white30,
                              width: 1,
                            ),
                          ),
                          child: const Icon(
                            Icons.settings,
                            color: Colors.white70,
                            size: 16,
                          ),
                        ),
                      ),
                    ),
                    
                    // ئوتتۇردىكى ئۇچۇر
                    Expanded(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Text(
                            'قەمبەر تۇرسۇن',
                            textDirection: TextDirection.rtl,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                          const SizedBox(height: 4),
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                            decoration: BoxDecoration(
                              color: const Color(0xFF5A6D9E),
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: Text(
                              'باشقۇرغۇچى',
                              textDirection: TextDirection.rtl,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: Colors.white.withOpacity(0.9),
                                fontSize: 10,
                                fontWeight: FontWeight.w500,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                    
                    // ئوڭ تەرەپتىكى ئايكون - چېكىنىش
                    Material(
                      color: Colors.transparent,
                      child: InkWell(
                        onTap: () {
                          // چېكىنىش دىئالوگىنى كۆرسىتىش
                          _showLogoutDialog(context);
                        },
                        hoverColor: const Color(0xFF3F5491).withOpacity(0.2),
                        splashColor: const Color(0xFF3F5491).withOpacity(0.3),
                        borderRadius: BorderRadius.circular(20),
                        child: Tooltip(
                          message: 'چېكىنىش',
                          child: Container(
                            padding: const EdgeInsets.all(8),
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: Colors.white30,
                                width: 1,
                              ),
                            ),
                            child: const Icon(
                              Icons.logout,
                              color: Colors.white70,
                              size: 16,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
              : 
              // كىچىكلىگەن ھالەتتىكى قۇرۇلما
              Container(
                alignment: Alignment.center,
                child: Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: const CircleAvatar(
                    radius: 24,
                    backgroundColor: Color(0xFF5A6D9E),
                    child: Icon(Icons.person, color: Colors.white, size: 28),
                  ),
                ),
              ),
          ),
        ],
      ),
    );
  }

  Widget _buildMenuItem({
    required IconData icon,
    required String title,
    required VoidCallback onTap,
    bool isSelected = false,
    bool showBadge = false,
  }) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        margin: const EdgeInsets.symmetric(vertical: 4),
        decoration: BoxDecoration(
          color: isSelected ? const Color(0xFF3F5491).withOpacity(0.2) : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: isSelected ? const Color(0xFF4F6BB5) : Colors.transparent,
            width: 1,
          ),
          boxShadow: isSelected ? [
            BoxShadow(
              color: const Color(0xFF3F5491).withOpacity(0.2),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ] : null,
        ),
        child: Tooltip(
          message: isMenuExpanded ? '' : title,
          preferBelow: false,
          child: InkWell(
            onTap: onTap,
            borderRadius: BorderRadius.circular(8),
            hoverColor: const Color(0xFF3F5491).withOpacity(0.1),
            splashColor: const Color(0xFF3F5491).withOpacity(0.2),
            highlightColor: const Color(0xFF3F5491).withOpacity(0.1),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              child: isMenuExpanded 
                ? // كەڭەيگەن ھالەتتە ئايكون ۋە تېكىست كۆرۈنىدۇ
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        padding: const EdgeInsets.all(6),
                        decoration: BoxDecoration(
                          color: isSelected ? const Color(0xFF3F5491).withOpacity(0.2) : Colors.transparent,
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Icon(
                          icon,
                          color: isSelected ? Colors.white : Colors.white70,
                          size: 20,
                        ),
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Text(
                          title,
                          style: TextStyle(
                            color: isSelected ? Colors.white : Colors.white70,
                            fontSize: 14,
                            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                          ),
                          textAlign: TextAlign.right,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      if (showBadge)
                        Container(
                          margin: const EdgeInsets.only(right: 4),
                          padding: const EdgeInsets.all(2),
                          decoration: const BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.circle,
                          ),
                          child: const Text(
                            '!',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 8,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                    ],
                  )
                : // كىچىكلىگەن ھالەتتە پەقەت ئايكونلا كۆرۈنىدۇ
                  Stack(
                    alignment: Alignment.center,
                    children: [
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: isSelected ? const Color(0xFF3F5491).withOpacity(0.2) : Colors.transparent,
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Icon(
                          icon,
                          color: isSelected ? Colors.white : Colors.white70,
                          size: 24,
                        ),
                      ),
                      if (showBadge)
                        Positioned(
                          top: 0,
                          right: 0,
                          child: Container(
                            width: 10,
                            height: 10,
                            decoration: const BoxDecoration(
                              color: Colors.red,
                              shape: BoxShape.circle,
                            ),
                          ),
                        ),
                    ],
                  ),
            ),
          ),
        ),
      ),
    );
  }

  // چېكىنىش دىئالوگىنى كۆرسىتىش فۇنكسىيىسى
  void _showLogoutDialog(BuildContext context) {
    // تاسادىپىي ئىشلىتىلىدىغان ئانىماتسىيە تىپىنى تاللاش
    final animationType = DateTime.now().millisecondsSinceEpoch % 4;
    
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: 'چېكىنىش دىئالوگىنى يوشۇرۇش',
      barrierColor: Colors.black.withOpacity(0.5),
      transitionDuration: const Duration(milliseconds: 400),
      pageBuilder: (context, anim1, anim2) => Container(),
      transitionBuilder: (context, animation, secondaryAnimation, child) {
        Offset begin;
        Offset end = Offset.zero;
        Curve curve = Curves.easeInOutCubic;
        
        // ھەر قېتىم ئوخشىمىغان ئانىماتسىيە
        switch (animationType) {
          case 0: // تۆۋەندىن يۇقىرىغا سىيرىلىش
            begin = const Offset(0.0, 0.5);
            break;
          case 1: // يۇقىرىدىن تۆۋەنگە سىيرىلىش
            begin = const Offset(0.0, -0.5);
            curve = Curves.bounceOut;
            break;
          case 2: // ئوڭدىن سولغا سىيرىلىش
            begin = const Offset(0.5, 0.0);
            break;
          case 3: // سولدىن ئوڭغا سىيرىلىش
            begin = const Offset(-0.5, 0.0);
            break;
          default:
            begin = const Offset(0.0, 0.2);
        }
        
        final curvedAnimation = CurvedAnimation(parent: animation, curve: curve);
        final Animation<Offset> offsetAnimation = Tween<Offset>(begin: begin, end: end).animate(curvedAnimation);
        
        return SlideTransition(
          position: offsetAnimation,
          child: FadeTransition(
            opacity: animation,
            child: ScaleTransition(
              scale: Tween<double>(begin: 0.8, end: 1.0).animate(curvedAnimation),
              child: AlertDialog(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(24),
                ),
                contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                backgroundColor: Colors.white.withOpacity(0.95),
                title: const Text(
                  'چېكىنىش',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
                content: SizedBox(
                  width: 280,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      TweenAnimationBuilder<double>(
                        tween: Tween<double>(begin: 0.8, end: 1.0),
                        duration: const Duration(milliseconds: 500),
                        builder: (context, value, child) {
                          return Transform.scale(
                            scale: value,
                            child: child,
                          );
                        },
                        child: const Icon(
                          Icons.logout,
                          size: 56,
                          color: Colors.orange,
                        ),
                      ),
                      const SizedBox(height: 16),
                      const Text(
                        'راستىنلا چېكىنمەكچىمۇ؟',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),
                ),
                actions: [
                  Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          style: TextButton.styleFrom(
                            backgroundColor: Colors.grey.withOpacity(0.2),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16),
                            ),
                          ),
                          child: const Text('ياق'),
                        ),
                        const SizedBox(width: 16),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context); // دىئالوگنى يېپىش
                            
                            // ئانىماتسىيە ئارقىلىق چېكىنىش
                            Navigator.of(context).push(
                              PageRouteBuilder(
                                transitionDuration: const Duration(milliseconds: 500),
                                pageBuilder: (context, animation, secondaryAnimation) => const LoginScreen(),
                                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                                  // قايتىش ئانىماتسىيىسى
                                  final curvedAnimation = CurvedAnimation(
                                    parent: animation,
                                    curve: Curves.easeInOut,
                                  );
                                  
                                  // ئانىماتسىيە تىپىنى تاللاش
                                  switch (animationType) {
                                    case 0: // سولغۇچ ئانىماتسىيە
                                      return FadeTransition(
                                        opacity: curvedAnimation,
                                        child: child,
                                      );
                                    case 1: // چوڭىيىش ئانىماتسىيىسى
                                      return ScaleTransition(
                                        scale: curvedAnimation,
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                    case 2: // ئايلىنىش ئانىماتسىيىسى
                                      return RotationTransition(
                                        turns: Tween<double>(begin: 0.0, end: 0.05).animate(curvedAnimation),
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                    default: // سىيرىلىش ئانىماتسىيىسى
                                      return SlideTransition(
                                        position: Tween<Offset>(
                                          begin: const Offset(0.0, 0.2),
                                          end: Offset.zero,
                                        ).animate(curvedAnimation),
                                        child: FadeTransition(
                                          opacity: curvedAnimation,
                                          child: child,
                                        ),
                                      );
                                  }
                                },
                              ),
                            );
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blue,
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16),
                            ),
                          ),
                          child: const Text('ھەئە'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
} 